import React, { useEffect, useState } from 'react'
import { Button,Pagination, Table, Tag, Space } from 'antd';
import ajax from '../../api/request'
import styled from 'styled-components'

interface PageProps {
  page?: number,
  size?: number
}

const LoadingWrapper = styled.div`
  width:100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  display:flex;
  justify-content:center;
  align-items:center;
  .mask {
    width:100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top:0;
    background: #000;
    opacity: .5;
  }
  .tip {
    padding: 25px;
    z-index: 10;
    background: #fff;
    border-radius: 10px;
  }
`;

const Loading = (props:any) => {
  return <LoadingWrapper>
    <div className="mask"></div>
    <div className="tip">
    {props.text}
    </div>
  </LoadingWrapper>
}

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    render: (text:any) => <a>{text}</a>,
  },
  {
    title: '姓名',
    dataIndex: 'username',
    key: 'username',
  },
  {
    title: '时间',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: '身份',
    key: 'userId',
    dataIndex: 'useId',
    render: (tags: any) => (
      <>
      </>
    ),
  },
  {
    title: 'Action',
    key: 'action',
    render: (text:any, record:any) => (
      <Space size="middle">
        <a onClick={() => {
          // console.log('1111', Users())
        }}>Invite {record.name}</a>
        <a onClick={() => {
          console.log('delete')
        }}>Delete</a>
      </Space>
    ),
  },
];

const Users = () => {

  // 1. 设置所有的数据
  const [tableData, setTableData] = useState<any[]>([])
  // 2, 默认显示页码 page
  const [current, setCurrent] = useState(1)
  // 3. 设置每次请求条数 size
  const [size, setSize] = useState(5)
  // 4. 总条数
  const [total, setTotal] = useState(0)
  // 5. 控制弹出框
  const [loading, setLoading] = useState(false)
  // 6. 用户提示
  const [text, setText] = useState('数据丢失了')

  useEffect(() => {
    // 调用数据获取函数
    getPageData({page: current, size})
  }, [current, size, total])

  const getLogin = async ({ username = 'lisi', password = 'ls'}) => {
    const res = await ajax.post('/api/login', {username, password})
    // console.log('res....:', res)
    localStorage.setItem('token', res.data.token)
  }

  const HandleFunction = () => {
    console.log('1111')
  }

  // 1. 获取分页数据
  const getPageData = async ({ page = 0, size = 10 }: PageProps) => {
    setLoading(true)
    const response = await ajax.get('/api/user', {params: {page, size}})
    console.log('response:....', response)
    if (response.data.data && response.data.data.length) {
      // 添加key值
      const data = response.data;
      data.data && data.data.forEach((val:any, index:number) => {
        val.key = index + 1;
      })
      console.log('response.....:', data)
      // total
      setLoading(false)
      // 设置了一个total
      setTotal(total => data.total)
      setTableData(tableData => [...data.data])
    } else {
      setText('数据请求有问题，请检测网络')
      setTimeout(() => {
        setCurrent(1)
        setLoading(false)
      }, 3000);
    }
  }

  // 2. 点击获取当前的页码 改变页码函数
  const onChange = (val:any) => {
    // 设置用户每次点击的页码
    setCurrent(val) // 异步执行的函数
  }

  // 3. 改变条总显示条数的函数 size改变的回调
  const onShowSizeChange = (current: number, pageSize:number) => {
    console.log('current:', current, 'pageSize:', pageSize)
    setSize(pageSize)
  }

  return <div>

    {
      loading ? <Loading text={text}/> :  (<>
        <Table
          columns={columns}
          dataSource={tableData}
          pagination={false}
        />
       {/* page:current size: pageSize, total,onChange  */}

        <Pagination
          showSizeChanger
          total={total}
          current={current}
          pageSize={size}
          onChange={onChange}
          onShowSizeChange={onShowSizeChange}
          showQuickJumper
          defaultCurrent={current}
          // defaultPageSize={10}
          // disabled
          pageSizeOptions={['5', '10', '15']}
        />
      </>)
    }
    <Button onClick={() => {
      getLogin({})
    }}>登陆</Button>



  </div>
}

export default Users;